<script>
import UserNavigator from "@/components/UserNavigator.vue";
import request from "@/utils/request";
import { currentUser } from "@/utils/login-user";
import { categoryConfig } from "@/utils/constant"

export default {
  name: "Detail",
  components: {
    UserNavigator
  },
  created() {
    // 取出当前点击的商品ID
    this.loadData(this.$route.query.id);

    //解析str
    this.user = currentUser();

  },
  data() {
    return {
      // 购买者的信息
      user: {},
      category: null,
      // 商品的信息
      itemData: {},
      // 购买的数量
      num: 1,
      // 描述内容样式
      rowStyle: {
        'text-align': 'center',
        'height': '65px',
        'font-size': '15px',
        'background': '#FDE2E2',
      },
      // 描述标签样式
      labelStyle: {
        'text-align': 'center',
        'font-size': '15px',
        'background': '#E1F3D8',
      },
      // 价格标红
      rowStyle_price: {
        'text-align': 'center',
        'height': '65px',
        'font-size': '25px',
        'background': '#FDE2E2',
        'color': 'rgba(255,68,0)'
      },
    };
  },
  methods: {
    loadData: function (id) {
      // 加载商品数据
      request.get('/item/one', {
        params: {
          id: id,
        }
      }).then(res => {
        this.itemData = res.data;
        this.category = categoryConfig[res.data.cid]
        document.title = this.itemData.title;
      });
    },
    buy() {
      request.post("/order", [{
        itemId: this.itemData.id,
        quantity: 1,
      }]).then(res => {
        this.$router.push("/myOrder")
      });
    },
    routeShop() {
      this.$router.push("/shop")
    },
    handleChange() {
    },
    addCart() {
      this.$confirm('是否确定加入购物车?', '', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).
        then(() => {
          request.post('/cart', {
            itemId: this.itemData.id,
            quantity: 1
          }).
            then(res => {
              this.$message.success("加入购物车成功~");
            });
        }).
        catch(() => {
          this.$message({
            type: 'error',
            message: '取消加入购物车'
          });
        });
    }
  },
  components: { UserNavigator }
}
</script>

<template>
  <div>
    <UserNavigator />
    <!--    图片和详情框-->
    <div class="body-container">
      <span class="product-nagivator">首页 > {{ category }} > {{ itemData.title }}</span>
      <div class="product-container">
        <el-image v-if="itemData.image" style="width: 320px; height: 320px;" :src="itemData.image"
          :preview-src-list="[itemData.image]"></el-image>
        <div class="detail-container">
          <div class="detail-title"><span>{{ itemData.title }}</span></div>
          <div class="detail-body">
            <div>
              <span>价格</span><span class="price-span">¥{{ itemData.price }}</span>
            </div>
            <div>
              <span>库存</span>{{ itemData.num }}
            </div>
            <div>
              <span>配送地址</span>{{ user.address }}
            </div>
            <div>
              <span>购买数量</span><el-input-number v-model="num" @change="handleChange" :min="1"
                label="请选择购买的数量"></el-input-number>
            </div>
            <div class="button-container">
              <el-button @click="addCart">
                加入购物车
              </el-button>
              <el-button @click="buy">
                立即购买
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="description-wrapper">
          <span>商品详情</span>
        </div>
        <div v-html="itemData.description">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.detail-container {
  padding: 0 0 0 20px;
  width: calc(100% - 320px);

  .button-container {
    height: 50px;
    display: flex;
    align-items: center;
  }
}

.detail-title {
  font-weight: 500;
  width: 100%;
  letter-spacing: 1px;
  font-size: 20px;
  color: #000;
  line-height: 35px;
  border-bottom: 1px solid #666;
}

.detail-body {

  & span {
    color: #666;
    font-size: 12px;
    line-height: 50px;
    width: 100px;
    display: inline-block;
  }

  .price-span {
    font-size: 24px;
  }
}

.product-container {
  padding: 10px;
  display: flex;
}

.description-wrapper {
  border-bottom: 1px solid black;


  & span {
    border-bottom: 2px solid black;
    box-sizing: content-box;
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
  }
}

.product-nagivator {
  font-size: 12px;
  color: #666;
}

.body-container {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.recommend {
  float: right;
  background-color: rgba(255, 242, 232);
}

.my-button {
  height: 70px;
  width: 200px;
  font-size: 25px;
  border-radius: 4px;
  color: white;
  background-color: rgba(255, 68, 0);
}

.price-info {
  text-align: center;
  background-color: #f3f3f3;
  height: auto;
  margin: 50px;
}
</style>@/utils/login-user